<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Three levels of linkage in the world</title>
	    <link href='chosen.min.css' rel='stylesheet'>
	    <script src="jquery.min.js"></script>
		<script src="chosen.jquery.min.js"></script>
	    <script src="area_chs.js"></script>
	    <style type="text/css">
	    	.dept_select{min-width: 200px;}
	    	button{
	    		padding: 4px 10px;
			    border-radius: 3px;
			    border: 0;
			    background: #444;
			    color: #fff;
	    	}
	    </style>
	</head>
<body>
<select id="country" class="dept_select"></select>
<select id="province" class="dept_select"></select>
<select id="city" class="dept_select"></select>
<button>submit</button>
<script type="text/javascript">
var areaObj = [];
function initLocation(e){
	var a = 0;
	for (var m in e) {
		areaObj[a] = e[m];
		a++;
	}
}
</script>
<script src="location_chs.js"></script>
<script type="text/javascript">
	var country = '';
	for (var a=0;a<=_areaList.length-1;a++) {
		var objContry = _areaList[a];
 		country += '<option value="'+objContry+'" a="'+(a+1)+'">'+objContry+'</option>';
	}
	$("#country").html(country).chosen({search_contains: true}).change(function(){
		var a = $("#country").find("option[value='"+$("#country").val()+"']").attr("a");
		var _province = areaObj[a];
		var province = '';
		for (var b in _province) {
			var objProvince = _province[b];
			if (objProvince.n) {
				province += '<option value="'+objProvince.n+'" b="'+b+'">'+objProvince.n+'</option>';
			}
		}
		if (!province) {
			province = '<option value="" b="0">--</option>';
		}
		$("#province").html(province).chosen({search_contains: true}).change(function(){
			var b = $("#province").find("option[value='"+$("#province").val()+"']").attr("b");
			var _city = areaObj[a][b];
			var city = '';
			for (var c in _city) {
				var objCity = _city[c];
				if (objCity.n) {
					city += '<option value="'+objCity.n+'">'+objCity.n+'</option>';
				}
			}
			if (!city) {
				var city = '<option value="">--</option>';
			}
			$("#city").html(city).chosen({search_contains: true}).change();
			$(".dept_select").trigger("chosen:updated");
		});
		$("#province").change();
		$(".dept_select").trigger("chosen:updated");
	});
	$("#country").change();
	$("button").click(function(){
		alert($("#country").val()+'-'+$("#province").val()+'-'+$("#city").val());
	});
</script>
</body>
</html>
